<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我们的回忆时光</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 时间轴导航 -->
        <div class="timeline-nav">
            <div class="timeline-track">
                <button class="nav-arrow nav-prev" aria-label="向前滑动">&lt;</button>
                <div class="years-container">
                    <div class="years">
                        <!-- 年份按钮将由JavaScript动态生成 -->
                    </div>
                </div>
                <button class="nav-arrow nav-next" aria-label="向后滑动">&gt;</button>
            </div>
            <div class="year-input-container">
                <input type="number" id="yearInput" min="2025" max="2120" placeholder="输入年份">
                <button id="yearJumpBtn">跳转</button>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 月份导航 -->
            <div class="month-nav">
                <div class="months">
                    <button class="month-btn" data-month="1">一月</button>
                    <button class="month-btn" data-month="2">二月</button>
                    <button class="month-btn" data-month="3">三月</button>
                    <button class="month-btn" data-month="4">四月</button>
                    <button class="month-btn" data-month="5">五月</button>
                    <button class="month-btn" data-month="6">六月</button>
                    <button class="month-btn" data-month="7">七月</button>
                    <button class="month-btn" data-month="8">八月</button>
                    <button class="month-btn" data-month="9">九月</button>
                    <button class="month-btn" data-month="10">十月</button>
                    <button class="month-btn" data-month="11">十一月</button>
                    <button class="month-btn" data-month="12">十二月</button>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="content-area">
                <div class="memory-container">
                    <!-- 这里将通过JavaScript动态添加回忆卡片 -->
                </div>
            </div>
        </div>
    </div>
    <!-- 添加图片查看模态框 -->
    <div id="imageViewModal" class="modal">
        <span class="close">&times;</span>
        <img id="viewedImage" src="" alt="">
    </div>
    <script src="data.js"></script>
    <script src="script.js"></script>
</body>
</html>